<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>margin用法</title>
	<style>
		div {
			/* 设置边框之后，中间会出现边框重叠的现象，不好看，去掉中间边框重叠 */
			float: left;
			width: 200px;
			height: 200px;
			border: 1px solid #ccc;
		
			/* 淘宝的做法:压住相邻的边框; */
			margin-left: -1px; 
			margin-top: -1px;


			/* 第二种写法：淘宝是这样做的，给每个盒子都加上定位 */
			position: relative;
			}

		div:hover {
				/* 定位的盒子在最高层， 出现压边，显示颜色不全的情况，就用定位 */
				/*position: relative;*/
				border: 1px solid #f40;	

				/* 给鼠标经过的盒子一个1， 让他浮起来，是使边框不被压倒 */
				z-index: 1;   
			}
	</style>
</head>
<body>
	<div>
	(1) 使元素水平垂直居中
	(2) 压住盒子相邻的边框
	</div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>

